<script setup lang="ts">
import {ref} from "vue";
import {phoneNumber, Verificationcode} from "@/http/Personal center";

const onClickLeft = () => history.back();
// const value = ref('');
const data=ref({
    code: '',
    phoneNumber:''
})
const sms = ref('');
const digit = ref('');

const dataes=ref({
    PhoneNumbers:'13273111283'
})
function Submit(){
    phoneNumber(data.value).then(res=>{
        console.log(res)
    })
}
function yzmhe(){
    Verificationcode(dataes.value).then(res=>{
        console.log(res)
    })
}
</script>

<template>
    <div>
        <van-nav-bar
                title="标题"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div class="phone">
            <div>绑定手机号</div>
            <van-cell-group inset>
                <van-field
                    v-model="sms"
                    center
                    clearable
                    placeholder="请输入手机号"
                >
                    <template #button >
                        <van-button size="small" type="primary" @click="yzmhe">发送验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>

        </div>
        <div class="phone">
            <div>验证码</div>
            <van-field v-model="digit" type="digit" placeholder="请输入验证码"/>
        </div>
        <div class="wlde">
            <van-button type="primary"  id="qswes" @click="Submit">提交</van-button>
        </div>
<!--        to="/shezhi"-->
    </div>
</template>

<style scoped lang="less">
.phone{
    width: 100%;
    height:80px;
    padding: 10px;
    font-size: 14px;
    margin-top: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .Verification{
        #onee{
            width: 60%;
            height: 30px;
            border: none;
        }

        #Verificationcode{
            border: none;
            background-color: white;
            color: #1892FF;
        }
    }
    #trwo{
        width: 60%;
        height: 30px;
        border: none;
    }
}
.wlde{
    margin-top: 15px;
    text-align: center;
    #qswes{
        width: 60%;
    }
}
</style>